<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view class="commodity"
          :style="{backgroundColor: 'white',padding: themeVars.pagePadding,fontSize:'14px',height: '100vh'}">

      <nut-skeleton :loading="publishInfoLoading" width="300px" height="15px" animated row="3">

        <view style="font-size: 16px;font-weight: bolder">
          {{ publishInfo.name }}
        </view>
        <view style="margin-top: 10px">
          <template v-if="publishInfo.productImg">
            <image v-for="img in publishInfo.productImg.split(',')"
                   style=" box-sizing: border-box;width: 100%;margin-top: 2px" lazy-load
                   :src="img"></image>

          </template>
        </view>
        <view>
          <nut-tag type="primary" v-if="publishInfo.publishType=='DEMAND'"> 需求商品</nut-tag>
          <nut-tag type="success" v-if="publishInfo.publishType=='IDLE'"> 闲置商品</nut-tag>
        </view>
        <view style="display: flex;justify-content: space-between;margin-top: 10px">
          <view style="width: 50%" class="single-line-text">
            联系人员：{{ publishInfo.contactName }}
          </view>
          <view style="width: 50%" class="single-line-text">
            联系电话：{{ publishInfo.contactPhone }}
          </view>
        </view>
        <view style="margin-top: 10px">
          联系地址： {{ publishInfo.contactAddr }}
        </view>
        <view style="margin-top: 10px">
          发布时间： {{ publishInfo.createTime }}
        </view>

        <nut-divider/>

        <!--产品详情-->
        <view>
          <view style="font-size: 16px;font-weight: bolder;color: red;text-align: center">产品详情</view>
          <view style="margin-top: 10px">{{ publishInfo.detailDesc }}
          </view>
          <view style="margin-top: 10px" v-if="publishInfo.imgDesc"
                @click="imgPreState.showPreview=true;imgPreState.imgData  =publishInfo.imgDesc.split(',').map(url=>({src:url+ImgWaterMarker}))">


            <image v-for="img in publishInfo.imgDesc.split(',')"
                   mode="widthFix"
                   style=" box-sizing: border-box;width: 100%;margin-top: 2px" lazy-load
                   :src="img+ImgWaterMarker"></image>
          </view>

        </view>
      </nut-skeleton>


    </view>

    <view class="fixed-bottom">


      <view
          style="height: 100%;width: 50%;background: white;display: flex;justify-content: space-around;font-size: 10px;color: black">

        <!--        <view @click="Taro.navigateTo({url:'/pages/enterpriseIntro/index?id='+publishInfo.enterpriseId})"
                      style="display: flex;flex-direction: column;justify-content: space-around;align-items: center">
                  <IconFont
                      size="20"
                      name="/images/other/商家1.png"
                  ></IconFont>
                  <view style="">查看厂家</view>
                </view>-->

        <view style="display: flex;flex-direction: column;justify-content: space-around;align-items: center"
              @click="collect(publishInfo.id)">
          <IconFont
              v-if="publishInfo.myIsCollect"
              size="20"
              name="star-n"
              color="#f00"
          ></IconFont>
          <IconFont
              v-else

              size="20"
              name="star-n"
              color="#dbdbdb"
          ></IconFont>
          <view>收藏</view>
        </view>

      </view>

      <view
          @click="Taro.makePhoneCall({phoneNumber: publishInfo.contactPhone})"
          style="height: 100%;width: 50%;background: #fc591a;display: flex;justify-content: center;align-items: center">
        <IconFont
            size="30"
            name="https://sdztl.oss-cn-hangzhou.aliyuncs.com/tuowulian-offline/images/other/%E7%94%B5%E8%AF%9D.png"
        ></IconFont>
        <view style="font-size: 13px;margin: 0 5px">电话联系</view>

      </view>
      <nut-image-preview :show="imgPreState.showPreview" :images="imgPreState.imgData"
                         @close="imgPreState.showPreview = false" @long-press="longPressSaveImg"/>

    </view>

  </nut-config-provider>
</template>

<script>

import {ref} from 'vue';
import useTheme from "../../../hooks/useTheme";

import {IconFont, Image} from "@nutui/icons-vue";
import Taro from "@tarojs/taro";
import {twPublishCollect, twPublishDetailApi} from "../../../api/publish";
import {longPressSaveImg} from "../../../utils/imgUtils";
import {ImgWaterMarker} from "../../../api/constant";

const {theme, themeVars} = useTheme()
const publishInfo = ref({})

const collect = (id) => {
  twPublishCollect({id: id}).then(res => {
    if (200 == res.code) {
      Taro.showToast({title: res.msg, icon: 'success', duration: 1500,});
      getProductDetail(id)
    }
  }).finally(() => {
    Taro.hideLoading();
  })
}

const publishInfoLoading = ref(false)
const getProductDetail = (id) => {
  publishInfoLoading.value = true;
  twPublishDetailApi(id).then(res => {
    publishInfo.value = res.data
  }).finally(() => {
    publishInfoLoading.value = false;
    Taro.hideLoading();
  })
}


const imgPreState = ref({
  showPreview: false,
  imgData: []
})


export default {
  methods: {longPressSaveImg},
  components: {IconFont},

  // 可以使用所有的 Vue 生命周期方法
  mounted() {
  },

  onLoad(options) {
    getProductDetail(options.id)


  },

  onReady() {
  },

  onShow() {
  },

  onHide() {
  },

  onPullDownRefresh() {

  },
  onReachBottom() {
    console.log("onReachBottom")
  },


  setup() {


    return {
      theme,
      themeVars,
      publishInfo,
      Taro,
      collect,
      imgPreState,
      publishInfoLoading,
      ImgWaterMarker
    }
  }

}

</script>

<style>

.commodity {
  display: flex;
  flex-direction: column;

}

.enterpriseInfo {
  margin-left: 10px;

}

.enterpriseTop {
  display: flex;
  justify-content: space-between;
}

.shop-addr {
  font-size: 24px;
  color: #636363;
  margin-top: 10px;
  width: 450px;
  height: 60px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #333; /* 背景颜色 */
  color: #fff; /* 字体颜色 */
  text-align: center; /* 文本居中 */
  display: flex;
  justify-content: space-between;
}
</style>